<script setup>
import { useGameStore, useUserStore, useSortStore } from '@/stores/index'
import { ElMessage } from 'element-plus'
import { baseURL } from '@/utils/request'
import { ref } from 'vue'
const userStore = useUserStore()
const gameStore = useGameStore()
const sortStore = useSortStore()
const form = ref({
  game_name: '',
  game_image: '',
  price: '',
  game_description: '',
  release_date: '',
  category: '',
  sortId: sortStore.sort[0].id,
  busId: '',
  link: ''
})

sortStore.getSortList()
form.value.busId = userStore.user.id

const addSubmit = async () => {
  console.log(form.value)
  form.value.category = sortStore.sort.find((item) => item.id === form.value.sortId).category
  /* console.log(form.value)
  console.log(typeof form.value.release_date) */

  await gameStore.addGame(form.value)
  ElMessage({
    message: '发布成功',
    type: 'success'
  })
  form.value = {}
  form.value.busId = userStore.user.id
}

const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    alert('上传头像图片只能是 JPG 格式!')
    return false
  }
  if (!isLt2M) {
    alert('上传头像图片大小不能超过 2MB!')
    return false
  }
  return true
}

const handleAvatarSuccess = (res) => {
  form.value.game_image = res.data
  console.log(form.value.game_image)
}
</script>

<template>
  <h3>发布游戏</h3>

  <el-form :model="form" label-width="100px">
    <el-col :span="24">
      <el-form-item label="游戏名：" prop="game_name">
        <el-input v-model="form.game_name" autocomplete="off"> </el-input
      ></el-form-item>
    </el-col>
    <el-row>
      <el-col :span="12">
        <el-form-item label="图片：">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :action="baseURL + '/files/upload'"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
          >
            <div class="img" v-if="form.game_image">
              <img :src="baseURL + '/files/' + form.game_image" class="avatar" />
            </div>
            <div v-else class="el-upload__tip">
              <i class="el-icon-plus avatar-uploader-icon"
                ><el-icon class="el-icon--upload"><Plus /></el-icon
              ></i>
            </div>
            <div class="btn">
              <el-button size="small" type="primary">点击上传</el-button>
            </div>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="下载地址：" prop="price">
          <el-input
            v-model="form.link"
            autocomplete="off"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入下载地址"
          >
          </el-input
        ></el-form-item>
      </el-col>
    </el-row>
    <el-col :span="24">
      <el-form-item label="售价：" prop="price">
        <el-input v-model="form.price" autocomplete="off"> </el-input
      ></el-form-item>

      <el-form-item label="游戏描述：" prop="game_description">
        <el-input v-model="form.game_description" autocomplete="off"> </el-input
      ></el-form-item>

      <el-form-item label="发行日期：" prop="release_date">
        <div class="block">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            size="large"
            v-model="form.release_date"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </div>
      </el-form-item>

      <el-form-item label="种类：" prop="category">
        <el-select v-model="form.sortId" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in sortStore.sort"
            :key="item.id"
            :label="item.category"
            :value="item.id"
          />
        </el-select>
        <!-- <el-select
        v-model="form.sortId"
        placeholder="请再确认一次"
        style="width: 100%"
      >
        <el-option
          v-for="item in sortStore.sort"
          :key="item.value"
          :label="item.category"
          :value="item.id"
        />
      </el-select> -->
      </el-form-item>
      <div class="center">
        <el-button type="info">取 消</el-button>
        <el-button type="primary" @click="addSubmit()">确 定</el-button>
      </div>
    </el-col>
  </el-form>
</template>

<style scoped lang="scss">
.center {
  text-align: center;
}
h3 {
  color: #027efb;
}
.avatar-uploader {
  width: 120px;
  margin-left: 10px;
  .el-upload__tip {
    border: #000 1px dashed;
    border-radius: 6px;
  }
  i {
    width: 100%;
    height: 120px;
  }
  .img {
    border-radius: 20px;
    overflow: hidden;
  }
  img.avatar {
    width: 100%;

    transition: all 0.3s ease;
    &:hover {
      transform: scale(1.1);
    }
  }
  .btn {
    width: 100%;
  }
  .el-button {
    margin-top: 10px;
    font-size: 16px;
    width: 120px;
    height: 30px;
  }
}
</style>
